<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>中小学生心理健康教育工作调查问卷</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="js/vue.js"></script>
		<script src="js/element-ui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/component.js"></script>
	</head>
	<style>
		*{
			margin: 0rem;
			padding: 0rem;
		}
		#app {
			background-color: #F7F7F7;
			box-sizing: border-box;
			height: 100vh;
		}
		.head_top {
			width: 100%;
			background-color: #1296FF;
		}
		.head_top_content {
			width: 75rem;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
		}
		.center_content {
			background-image: url(image/head.jpg);
			background-repeat: no-repeat;
			width: 100%;
			height: 20rem;
			background-size: 100% 100%;
			color: #FFFFFF;
			line-height: 19rem;
		}
		
		.bigboxs {
			width: 100%;
			background-color: #F7F7F7;
			max-height: 100%;
			letter-spacing: 1px;
		}
		.read_know {
			width: 75rem;
			background-color: #FFFFFF;
			border-radius: 0.3125rem;
			margin: 0 auto;
			padding: 1.25rem;
			transform:translate(0rem,-2.5rem);
			text-align: center;
		}
		.foots {
			width: 100%;
			background-color: #F7F7F7;
			display: flex;
			justify-content: center;
			padding: 1.875rem 0rem;
			color: #333333;
			font-size: 0.8125rem;
			position: fixed;
			bottom: 0px;
		}
		.foots>div {
			padding: 0rem 0.625rem;
		}
		.outs:hover {
			cursor:pointer;
			color: red;
		}
	</style>
	<body>
		<div id="app">
			<div class="head_top">
				<div class="head_top_content">
					<div><img style="height: 2.75rem;" src="./image/logowhite.png" /></div>
					<div style="line-height: 2.75rem;">
						<span>你好，{{username}}</span>
						<span class="outs" @click="outs_fn">
							<i class="el-icon-switch-button"></i>
							<span>退出</span>
						</span>
					</div>
				</div>
			</div>
			<div class="center_content">
				<div style="width: 68.75rem;margin: 0 auto;">
					<h2>中小学生心理健康教育工作调查问卷</h2>
				</div>
			</div>
			<div class="bigboxs">
				<div class="read_know">
					<img src="image/redact.png" style="width: 13.75rem;height: 13.75rem;"/>
					<p style="color: #1296FF;font-size: 1.25rem;font-weight: 600;">提交成功</p>
				</div>
			</div>
			<div class="foots">
				<div>启迪心智 幸福人生</div>
				<div>北京心智计算科技有限公司</div>
				<div>京ICP备17001131号</div>
				<div>服务热线: 400 670 0176</div>
			</div>
		</div>
	</body>
	<script>
	    new Vue({
			el: '#app',
			data: function() {
				return {
					username: '老师',
				}
			},
			created() {
				this.username = getQueryString('name')
			},
			methods: {
				outs_fn() {
					// console.log(1111)
					location.href = 'index.html'
					history.pushState(null, null, 'index.html');
					window.addEventListener('popstate', function () {
					    history.pushState(null, null, 'index.html');
					});
				},
			}
		})
	</script>
</html>
